!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<met<a http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遥感道路</title>
<style>
    body{
        background: url("https://clubimg.club.vmall.com/data/attachment/forum/202011/10/202221yasvd0z0gkcrdzt7.jpg"), no-repeat center center;
        background-size:cover;
        }
</style>
</head>
<body>
<h1 style="text-align: center">欢迎来到遥感道路</h1>


<hr>
<p>当前为游客模式，为了更好的体验请登录：<a href="#">登入</a></p>

<form method="post" enctype="multipart/form-data" id="file_upload" style="text-align: center">
    <p>图片预览：</p>
    <img id="image-preview" src="inc/_search.png" class="img-responsive" alt="无法显示默认头像">
    <p>
        <input type="file" id="file" name="upload_image" accept="image/gif, image/jpeg, image/png, image/jpg">
        <button type="button"  onclick="javascript:location.reload()">重置</button>
        <input type="button" value="下载图片" onclick="save()" />
    </p>
    <p id="info"></p>
</form>
<br>
<div style="text-align: center;">
    <p style="color: #FF0000 ;">注意：</p>
    <p>请先选择需要进行处理的照片，系统会自动将其转换为成品照片。<br>处理后的照片需要下载才能浏览</p>
</div>
<br>
<div style="text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    display: inline-block">
    <a href="登入页面.html">退出</a>
</div>


<style>
    #image-preview {
        border: 1px solid #ccc;
        width: 100%;
        height: 100%;
        max-width: 200px;
        max-height: 200px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }

</style>
<script type="text/javascript">
    let fileInput = document.getElementById('file');
    let info = document.getElementById('info');
    let preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function() {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = fileInput.files[0];
        let size = file.size;
        if (size >= 1 * 1024 * 1024) {
            alert('文件大小超出限制');
            info.innerHTML = '文件大小超出限制';
            return false;
        }
        // 获取File信息:
        info.innerHTML = `文件名称:  + ${file.name}<br>文件大小: ${file.size} <br>上传时间: ${file.lastModifiedDate}`;
        if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function(e) {
            let data = e.target.result;
            console.log(preview, 'a标签')
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);

    });

    function save() {

        var url = preview.src; // 获取图片地址
        var a = document.createElement('a'); // 创建一个a节点插入的document
        var event = new MouseEvent('click') // 模拟鼠标click点击事件
        a.download = 'beautifulGirl' // 设置a节点的download属性值
        a.href = url; // 将图片的src赋值给a节点的href
        a.dispatchEvent(event)
    }
</script>
</body>
</html>
</html>
